<template>
    <div id="system">
        <div class="system-title">{{workerId ? '编辑客服' : '新增客服'}}</div>

        <el-form :label-position="labelPosition" label-width="140px">
            <el-form-item label="管理员名字：" class="ui-item">
                <el-input v-model="nickname" placeholder="管理员名字"></el-input>
            </el-form-item>
            <el-form-item label="管理员账号：" class="ui-item">
                <el-input v-model="account" placeholder="管理员账号"></el-input>
            </el-form-item>
            <el-form-item label="管理员密码：" class="ui-item">
                <el-input v-model="password" placeholder="管理员密码"></el-input>
            </el-form-item>
            <el-form-item label="">
                <el-button @click="onSaveClick()" size="medium" type="primary">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'user-man-detail',
    data () {
        return {
            workerId: '',
            nickname: '',
            account: '',
            password: ''
        }
    },
    created () {
        this.workerId = this.$route.params.id || ''
        if (this.workerId) {
            this.getData(this.workerId)
        }
    },
    mounted () {
    },
    methods: {
        onSaveClick () {
            let _this = this
            if (this.workerId) {
                alert('编辑')
                let data = {
                    id: this.workerId
                }
                this.$api.system.editWorkerData(data, res => {
                    if (res.code === 200) {
                        _this.$message('修改成功')
                    } else {
                        _this.$message(res.msg)
                    }
                })
            } else {
                alert('保存')
                let data = {
                    nickname: this.workerId,
                    account: this.account,
                    password: this.password
                }
                this.$api.system.addWorkerData(data, res => {
                    if (res.code === 200) {
                        _this.$message('新增成功')
                    } else {
                        _this.$message(res.msg)
                    }
                })
            }
        },
        // 更新系统消息
        getData (id) {
            let _this = this
            let data = {
                'params': {
                    id: id
                }
            }
            this.$api.system.getWorkerData(data, res => {
                if (res.code === 200) {
                    _this.nickname = ''
                    _this.account = ''
                    _this.password = ''
                } else {
                    _this.$message(res.msg)
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    #system {
        width: 640px;
        height: 100%;
        padding: 10px 0;
        .system-title{
            font-size: 22px;
            margin-bottom: 40px;
        }
        .system-item{
            position: relative;
            margin-bottom: 30px!important;
        }
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
            width: 480px;
        }
        .el-button{
            // position: absolute;
            // top: 0;
            // right: -100px;
            margin-top: 20px;
            // display: block;
        }
        .el-form-item__content{
            height: 30px;
        }
        .el-form-item__label{
            height: 30px;
        }
        .btn-height{
            width: 720px;
            padding: 10px 0 20px 0;
        }
        .ui-item{
            margin-bottom: 20px;
        }
    }
</style>
